<template>
  <div style="text-align: center">
    <el-transfer
      v-model="value4"
      style="text-align: left; display: inline-block"
      filterable

      :titles="['库存1', '出库']"
      :button-texts="['到左边', '到右边']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      :data="data"
      @change="handleChange"
    >
      <span slot-scope="{ option }"><el-tag :color="option.color" :type="option.type">{{ option.attribute }} </el-tag> - {{ option.label }}{{ option.key }}</span>
      <el-button slot="left-footer" class="transfer-footer" size="small">操作</el-button>
      <el-button slot="right-footer" class="transfer-footer" size="small">操作</el-button>
    </el-transfer>
  </div>
</template>

<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  .el-transfer-panel{
    width: 400px;
    /*height: 500px;*/
  }
</style>

<script>
// import {deviceListInfo, subjectListInfo} from "@/api/user";
import { deviceListInfo } from '@/api/user'

export default {
  data() {
    const generateData = _ => {
      const data = []
      console.log('dddddddddddd')

      // for (let i = 1; i <= 15; i++) {
      //   data.push({
      //     key: i,
      //     label: `备选项 ${ i }`,
      //     disabled: i % 4 === 0
      //   });
      // }
      return data
    }
    return {
      data: generateData(),
      deviceData: [],
      value: [],
      value4: [],
      renderFunc(h, option) {
        return '<span>{ option.key } - { option.lable }<el-tag :type="option.type">{{ option.attribute }}</el-tag></span>'
      }
    }
  },
  created: function() {
    console.log('ddddddssssssssssssddddd')
    deviceListInfo(
      { device_state: 1 }
    ).then((res) => {
      console.log('ssddsds')
      if (res.code == '20000') {
        this.data = res.data
        // this.$message('提交成功!')
      } else {
        // this.$message({
        //   message: '提交失败，请联系管理员!',
        //   type: 'warning'
        // })
      }
    })
  },

  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      var deviceData = this.value4
      console.log('deviceData:', deviceData)
    }

  }
}
</script>
